<template>
    <div>
        <classification :category1_list="categoryStore.category1_attr_list" v-model:is_add_attr="is_add_attr"
            :category_disabled="addattr_now" v-model:category3_id="attr_form.categoryId"
            v-model:category1_id="category1_id" v-model:category2_id="category2_id" :is_attr_spu="1">
        </classification>
        <div v-if="!addattr_now">
            <el-card shadow="always" :body-style="{ padding: '20px' }" class="attr-card">
                <el-button type="primary" size="default" :disabled="!is_add_attr"
                    @click="addattr_now = true">添加属性</el-button>
                <el-button type="primary" size="default" @click="refresh_attr" :disabled="!is_add_attr">刷新</el-button>
                
                <el-table border class="attr-table" :data="categoryStore.attr_list">
                    <el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
                    <el-table-column label="属性名称" width="240" align="center" prop="attrName"></el-table-column>
                    <el-table-column label="属性值" align="center">
                        <template #default="scope">
                            <el-tag v-for="item in scope.row.attrValueList" :key="item.id" type="primary" size="large"
                                effect="light" class="attr-tag">{{ item.valueName }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center">
                        <template #default="scope">
                            <el-button type="primary" size="default" icon="Edit" @click="edit_attr(scope.row)">编辑</el-button>
                            <el-popconfirm title="确定删除该属性吗？" width="200px" @confirm="delete_attr(scope.row.id)">
                                <template #reference>
                                    <el-button type="danger" size="default" icon="Delete" >删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
        <div v-else>
            <el-card shadow="always" :body-style="{ padding: '20px' }" class="attr-card">
                <el-form label-width="80px" :inline="true" size="normal">
                    <el-form-item label="属性名称" size="normal">
                        <el-input size="normal" placeholder="请输入属性名称" v-model="attr_form.attrName"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" size="default" icon="Plus" @click="add_attr_to_list"
                    :disabled="!attr_form.attrName">添加属性值</el-button>
                <el-table :data="attr_form.attrValueList" border style="margin:18px 0">
                    <el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
                    <el-table-column label="属性值名称" align="center">
                        <template #default="scope">
                            <el-input size="normal" placeholder="请输入属性值名称" v-model="scope.row.valueName"
                                @blur="check_input(scope.row,scope.$index)" ref="refofinput"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center">
                        <template #default="scope">
                            <el-button type="primary" size="default" @click="delete_attr_value(scope.$index)" icon="Delete">删除</el-button>        
                        </template>
                    </el-table-column>

                </el-table>
                <el-button type="primary" size="default" @click="save_attr" :disabled="!attr_form.attrValueList.length">保存</el-button>
                <el-button type="primary" size="default" @click="addattr_now = false">取消</el-button>


            </el-card>
        </div>


    </div>
</template>

<script setup lang="ts">
import useCategoryStore from '@/store/modules/category'
import { useThrottle } from '@/utils/throttle';
import { nextTick, onMounted, ref } from 'vue';
import type { Attr } from '@/api/product/attr/type';
import { reqCategoryAddEdit, reqCategoryDelete } from '@/api/product/attr';
import { ElMessage } from 'element-plus';
const categoryStore = useCategoryStore()
// 是否可以添加属性
let is_add_attr = ref<boolean>(false)
// 是否正在添加属性，添加属性时不能选择属性分类
let addattr_now = ref<boolean>(false)
let category1_id = ref<number>(0)
let category2_id = ref<number>(0)
let attr_form = ref<Attr>({
    attrName: '',
    categoryId: 0,
    categoryLevel: 3,
    attrValueList: []
})
let refofinput = ref<any>(null)
// 编辑属性
function edit_attr(row: Attr){
    addattr_now.value=true;
    attr_form.value=JSON.parse(JSON.stringify(row));
}
// 删除属性
const delete_attr = useThrottle(async (attrId: number)=>{
    const res = await reqCategoryDelete(attrId);
    if(res.code == 200){
        ElMessage.success('删除成功');
        categoryStore.getAttr_list(category1_id.value, category2_id.value, attr_form.value.categoryId);
    }
    else{
        ElMessage.error('删除失败');
    }
}, 1000)
// 添加属性值
function add_attr_to_list() {
    attr_form.value.attrValueList.push({
        valueName: '',
    })
    nextTick(()=>{
        refofinput.value.focus()
    })
}
// 检查属性值
function check_input(row: any, index: number) {
    if (row.valueName == '') {
        attr_form.value.attrValueList.splice(index, 1);
        ElMessage.error('属性值不能为空');
    }
    else{
        attr_form.value.attrValueList.forEach((item: any, i: number)=>{
            if(item.valueName === row.valueName && i !== index){
                attr_form.value.attrValueList.splice(index, 1);
                ElMessage.error('属性值不能重复');
                return;
            }
        })
    }
}
// 删除属性值
function delete_attr_value(index: number){
    attr_form.value.attrValueList.splice(index, 1);
    ElMessage.success('删除成功');
}
// 保存属性
const save_attr = async () => {
    if(attr_form.value.attrValueList.length === 0||attr_form.value.attrValueList.some((item: any)=>item.valueName === '')){
        ElMessage.error('属性值不能为空');
        return;
    }
    const res = await reqCategoryAddEdit(attr_form.value);
    if (res.code == 200) {
        ElMessage.success('保存成功');
        attr_form.value.attrName = '';
        attr_form.value.attrValueList = [];
        categoryStore.getAttr_list(category1_id.value, category2_id.value, attr_form.value.categoryId);
        addattr_now.value = false;
    }
    else {
        ElMessage.error(res.data);
    }
}
// 刷新属性列表
function refresh_attr(){
    categoryStore.getAttr_list(category1_id.value, category2_id.value, attr_form.value.categoryId);
}
onMounted(() => {
    categoryStore.getCategory1_attr_list();
})
</script>
<style lang="less">
@import url('../../../styles/product/attr.less');

.attr-tag {
    margin: 8px;
}
</style>